<template>
  <section class="component work-menu col">
    <div class="head-title-box row middle-span center-span">
      <img
        class="login-logo-img"
        src="@/assets/images/common/logo-tuopu.png"
        style="width:25px;margin-right:10px"
      />
      <span v-if="!menuCollapse">拓扑贷后管理系统</span>
    </div>

    <el-menu
      :collapse="menuCollapse"
      :default-active="$route.fullPath"
      @select="selectMenuItem"
      class="el-menu-vertical-demo"
      unique-opened
    >
      <el-submenu
        :index="subItem.url"
        :key="subItem.id"
        class="submenu"
        v-for="subItem of menuList"
      >
        <template slot="title">
          <svg-icon :iconName="subItem.icon"></svg-icon>
          <span class="submenu-title" slot="title" style="margin-left:10px">
            {{ subItem.name }}
          </span>
        </template>

        <el-menu-item
          :index="item.url"
          :key="item.id"
          class="menu-item"
          v-for="item of subItem.children"
          >{{ item.name }}</el-menu-item
        >
      </el-submenu>
    </el-menu>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import WorkMenuItem from "~/components/workspace/work-menu-item.vue";
import { State, Mutation, Action, namespace } from "vuex-class";
const workspaceModule = namespace("workspace");

@Component({
  components: {
    WorkMenuItem
  }
})
export default class WorkMenu extends Vue {
  @State private menuResource;
  @State private menuCollapse!: boolean;

  private menuList: any[] = [];

  private mounted() {
    const rescource = this.menuResource.filter(
      x => ["DIRECTORY", "MENU"].includes(x.type) && x.url
    );

    const menus = rescource
      .filter(x => x.type === "DIRECTORY")
      .map(item => {
        const children = rescource
          .filter(x => x.parent === item.id && x.type === "MENU" && x.url)
          .sort((x: any, y: any) => x.resoSort - y.resoSort);

        if (children && children.length) {
          return { ...item, children };
        } else {
          return item;
        }
      })
      .sort((x: any, y: any) => x.resoSort - y.resoSort);

    this.menuList = menus;
  }

  /**
   * 选择菜单项
   * 生成缓存项
   */
  private selectMenuItem(path, pathArray) {
    // 防止重复点击
    if (this.$route.path === path) {
      return;
    }

    // 路径长度验证
    if (pathArray.length !== 2) {
      return;
    }

    this.$nextTick(() => {
      this.$router.push(path);
    });
  }
}
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.component.work-menu {
  background-color: #2a69c9;
  height: 100%;
  overflow-y: hidden;
  .el-menu {
    overflow-y: scroll;
    overflow-x: hidden;
    &::-webkit-scrollbar {
      width: 0 !important;
    }
    border-right: 0; // 消除菜单左侧突出边距
  }
  .head-title-box {
    flex-basis: 60px;
    color: #fff;
    background: #2a69c9;
    max-width: 200px;
    line-height: 60px;
    text-align: left;
  }
  .menu {
    flex: 1;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 0 !important;
    }
  }
}
</style>
